<template>
  <div>
    <div id="main" style="width:500px;height:400px;"></div>
  </div>
</template>
<script>
export default {
  created () {},
  mounted () {
    this.makeBar()
  },
  props: ['datalist'],
  watch: {
    datalist (newVal) {
      this.makeBar()
    }
  },
  methods: {
    makeBar () {
      // 1. 初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'))
      // 2.准备配置项
      let option = {
        xAxis: {
          type: 'category',
          data: ['管理员人数', '学员人数']
        },
        title: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: { animation: true },
          formatter: '{b}: {c}%<br />'
          //自定义整理格式
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.datalist,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      // 3.把配置项 设置给实例
      myChart.setOption(option)
    }
  }
}
</script>
